import React from 'react';
import styles from './index.less';
import { Form,Input,Row,Col,Button,Radio,Divider } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { Link } from 'umi';
import ReactSimpleVerify from './simpleVerify/index'
import {
  WechatOutlined
} from '@ant-design/icons';

export default class RegisterModel extends React.Component{
    state = {
        timeText: '获取验证码',
        disableBtn: false
    };
    formRef = React.createRef<FormInstance>();
    times:any = null;
    handelBtnClick = () => {
        let time = 59;
        this.setState({disableBtn: true,timeText: time + 's'});
        this.times = setInterval(() => {
            time--;
            if(time === 0 || time < 0){
                this.setState({disableBtn: false,timeText: '获取验证码'});
                clearInterval(this.times)
            }else{
                this.setState({timeText: time + 's'});
            }
        },1000)
    }
    render(){
        return (
            <>
                <div className={styles.top}>
                    <div className={styles.header}>
                        <span className={styles.title}>欢迎注册数字蜂巢</span>
                    </div>
                </div>
                <div className={styles.mainBox}>
                   <div className={styles.main}>
                        <Form ref={this.formRef}>
                            <Form.Item
                                name="value"
                                rules={[{ required: true, message: '请输入手机号码!' }]}
                            >
                                <Input placeholder="请输入11位手机号码（作为您的登录账号）" />
                            </Form.Item>
                            {/* <Form.Item
                                name="value1"
                            >
                                <ReactSimpleVerify success={ () => {

                                }}/>
                            </Form.Item> */}
                            <Form.Item >
                                <Row gutter={8}>
                                    <Col span={16}>
                                        <Form.Item
                                        name="captchaa"
                                        noStyle
                                        rules={[{ required: true, message: 'Please input the captcha you got!' }]}
                                        >
                                        <Input placeholder="请输入验证码"/>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Button onClick={ () => this.handelBtnClick()} style={{width: '100%'}} disabled={this.state.disableBtn} type="primary">{this.state.timeText}</Button>
                                    </Col>
                                </Row>
                            </Form.Item>
                            <Form.Item
                                name="value1"
                                rules={[{ required: true, message: '请输入登录密码!' }]}
                            >
                                <Input type="password" placeholder="请输入登录密码" />
                            </Form.Item>
                            <Form.Item name="radio-group">
                                <Radio.Group>
                                    <Radio value="a">同意并遵守
                                        <Link to="/modelPage/fuwutiaokun" target="_blank" >《数字蜂巢(DigiHive®)服务条款》</Link>
                                        和
                                        <Link to="/modelPage/yins" target="_blank">《免责声明》</Link>
                                    </Radio>
                                </Radio.Group>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" style={{width: '100%'}} htmlType="submit">
                                    立即注册
                                </Button>
                            </Form.Item>
                        </Form>
                        <div style={{textAlign: 'center'}}>
                            <p>已有账号， <Link to="/user/login">直接登录</Link> </p>
                        </div>
                        <div>
                            <Divider plain>或</Divider>
                        </div>
                        <div>
                            <Button style={{width: '100%'}}><WechatOutlined style={{color: 'rgb(116, 197, 145)'}} /> 使用微信登陆</Button> 
                        </div>
                    </div> 
                </div>
            </> 
        )
    }
}